<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选老婆</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
    <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止" disabled>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //设置图片文件数组
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];

    //计数变量
    var count = 0;

    //循环计时器
    let interval = null;

    //当前取得的图片
    let img = "";

    //开始按钮
    $("#startBtn").click(function () {
        //设置按钮状态
        $(this).prop("disabled", true);
        $("#stopBtn").prop("disabled", false);

        //设置循环定时器
        interval = setInterval(function () {
            //通过计数器获取索引
            let index = count % 10;
            img = imgs[index];  //保存图片路径
            $("#small").prop("src", img);    //设置小图
            count++;    //计数器++
        }, 100);
    });

    //结束按钮
    $("#stopBtn").click(function () {
        //设置按钮状态
        $(this).prop("disabled", true);
        $("#startBtn").prop("disabled", false);

        //停止循环计时器
        clearInterval(interval);
        //获取当前图片路径并设置大图
        $("#big").prop("src",img);
        $("#big").prop("style","width: 400px;height: 400px");
    });
</script>
</html>